<template>
<view class="index_class">
  <u-navbar :background="background" back-icon-color="#fff" :custom-back="backFun" class="u-flex">
    <view class="u-flex headTablist">
				<span v-for="(item,index) in headTablist" @click="pageScrollTo(item.selector,index)" :key="index"
              class="headTabItem" :class="headTabCurrent===index?'headTabActive':null">
					{{ item.name }}
				</span>
    </view>
    <!-- #ifndef MP-WEIXIN -->
    <div slot="right" class="u-m-r-30">
      <u-icon name="zhuanfa" color="#fff" size="48" class="u-m-r-25" @click="makePoster"></u-icon>
      <!-- <u-icon name="more-dot-fill" color="#fff" size="48"></u-icon> -->
    </div>
    <!-- #endif -->
  </u-navbar>
  <view class="details">
    <!-- 商品 详情 -->
    <swiper class="swiper">
      <swiper-item v-for="(item,index) in swiperItems" :key="index"
                   @click="previewImgs(swiperItems,index)">
        <u-image :src="item.img_url" width="100%" height="100%"></u-image>
		<!-- <video src="item.img_url" controls width="100%" height="100%"></video> -->
      </swiper-item>
    </swiper>

    <view class="fight-group" v-if="product.is_activity == 3">
      <view class="fight-group__left">
        <view>{{ $t('¥') }}
          <text class="u-font-xl">{{ product.zs_shop_price }}</text>
        </view>
      </view>
      <view class="fight-group__middle">
        <view class="fight-group__middle--top">{{ $t('拼团优惠价') }}</view>
        <view class="fight-group__middle--bottom">{{ $t('¥') }}{{ datainfo.goodsinfo.zs_market_price }}</view>
      </view>
      <view v-if="activity_info.assem_type == 1 && activity_info.zhuangtai == 0" class="fight-group__right"
            style="color: #fff;">{{ activity_info.pin_num }}{{ $t('人团') }}
      </view>
      <u-count-down
          v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
          :timestamp="returnRemainTimeout(activity_info.end_time)" :show-border="true" separator="zh"
          separator-color="#FF" bg-color="#FF8300" separator-size="28" font-size="24" color="#FFF"
          border-color="transparent"></u-count-down>
    </view>

    <view class="topPricePanel">
      <view v-if="product.is_activity == 0 || product.is_activity == 1" class="u-p-r-30 u-p-t-20 ">
        <p class="u-flex u-col-center">
          <span class="shop-price"><span style="font-size:20rpx">{{ $t('¥') }}</span>{{ product.shop_price }}</span>
          <span class="market-price u-m-l-20">{{ $t('价格') }}<text
              class="u-m-l-6">{{ '￥' + product.zs_market_price }}</text>
						</span>
        </p>
      </view>
      <view v-if="product.is_activity == 2" class="u-p-r-30 u-p-t-20 ">
        <p class="u-flex u-col-center">
          <span>{{ $t('积分') }}</span><span class="shop-price">{{ product.integral }}</span>
          <span>{{ $t('个') }}+</span>
          <span class="shop-price"><span style="font-size:20rpx">{{ $t('¥') }}</span>{{ product.zs_shop_price }}</span>
          <span class="market-price u-m-l-20">{{ $t('价格') }}<text
              class="u-m-l-6">{{ $t('¥') }}{{ product.zs_market_price }}</text></span>
        </p>
      </view>
      <view class="productNameWrap ">
        <p class="u-font-15"> {{ product.goods_name }}</p>
        <u-tag :text="$t('自营')" type="warning" size="mini" mode="light" shape="circle"
               v-if="product.leixing == 1"/>
        <u-tag :text="$t('秒杀')" type="warning" size="mini" mode="light" shape="circle"
               v-if="product.is_activity == 1"/>
        <u-tag :text="$t('积分换购')" type="warning" size="mini" mode="light" shape="circle"
               v-if="product.is_activity == 2"/>
        <u-tag :text="$t('拼团')" type="warning" size="mini" mode="light" shape="circle"
               v-if="product.is_activity == 3"/>
        <view class="fight-group__right"
              v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
              style="color: #FF5959;">{{ activity_info.pin_num }}{{ $t('人团') }}
        </view>
      </view>

    </view>


    <view class="grace-time-press" v-if="product.is_activity == 1">
      <view class="datatime-left">{{ $t('距离结束') }}
        <u-count-down :timestamp="returnRemainTimeout(activity_info.end_time)" :show-border="true"
                      separator="zh" separator-color="#FF6262" bg-color="#FF6262" separator-size="28" font-size="24"
                      color="#FFF" border-color="transparent"></u-count-down>
      </view>
      <u-line-progress class="progress-right" active-color="#ff3333" inactive-color="#fbb4af" :striped="true"
                       :striped-active="true" :show-percent="false" :percent="activity_info.sales_ratio">
        <!-- <slot>已售{{activity_info.sales_ratio}}%</slot> -->
      </u-line-progress>
    </view>

    <view class="order-shop bgCircle">
      <view class="order_list">
        <view class="juan">
          <text class="order_list_left_title">{{ $t('发货') }}</text>
          <text class="color" style="padding-left:20rpx;">
            {{ product.freight }}
          </text>
        </view>

        <i class="iconfont order_color" style="font-size:26rpx!important;">{{ $t('销量') }}:
          {{ product.sale_number }}</i>

      </view>
      <view class="order_list" @click="coupon(1)"
            v-if="couponinfos.is_show === 1 && product.is_activity != 2">
        <view class="juan">
          <text class="order_list_left_title">{{ $t('领券') }}</text>
          <text class="color" style="padding-left:20rpx;" v-for="(coupon,coukey) in couponinfos.infos "
                :key="coukey">
            {{ $t('满') }}{{ coupon.man_price }}{{ $t('减') }}{{ coupon.dec_price }}
          </text>
        </view>

        <i class="iconfont icon_e60c order_color"></i>

      </view>
      <view class="order_list" @click="coupon(2)" v-if="huodong.is_show === 1 && product.is_activity != 2">
        <view class="juan">
          <text>{{ $t('活动商品') }}</text>
          <text style="padding-left:20rpx;flex:1">{{ huodong.infos }}</text>
        </view>

        <i class="iconfont icon_e60c order_color"></i>

      </view>
      <view class="order_list" @click="coupon(3)" v-if="sertions.is_show === 1">
        <view class="juan">
          <text class="order_list_left_title">{{ $t('服务') }}</text>
		  <view class="fw2">
			  <text style="padding-left:30rpx" v-for="(sertionsItem,sertionsKey) in sertions.infos"
					:key="sertionsKey">{{ sertionsItem.ser_name }}
			  </text>
		  </view>
        </view>

        <i class="iconfont icon_e60c order_color"></i>

      </view>
      <view class="order_list" @click="buyNow('guige')" v-if="specs.length">
        <view class="juan">
          <text class="order_list_left_title">{{ selectText }}</text>
          <text style="padding-left:20rpx;flex:1">{{ guige }}</text>
        </view>

        <i class="iconfont icon_e60c order_color"></i>

      </view>

      <popup-layer ref="popupRef" :direction="'top'" @on-close="closePopup">
        <view class="popup-coupon" v-show="PopupIndex==1">
          <view class="popup-title">{{ $t('优惠券') }}</view>
          <view class="coupon-list">
            <view class="items" v-for="(conList,conKey) in getcouponlst" :key="conKey">
              <view class="coupon-left">
                <view>￥
                  <text>{{ conList.dec_price }}</text>
                  {{ $t('优惠券') }}
                </view>
                <text>{{ $t('满') }}{{ conList.man_price }}{{ $t('使用') }}</text>
                <text>{{ $t('有限期') }}:{{ conList.start_time }}-{{ conList.end_time }}</text>
              </view>
              <view class="coupon-right">
                <text @click="Receive(conList.id)" v-if="conList.have == 0">{{ $t('立即领取') }}</text>
                <text style="background:#999" v-if="conList.have == 1">{{ $t('已领取') }}</text>
              </view>
            </view>

          </view>

          <view class="popup-com">
            <button @click="hidePopup">{{ $t('确定') }}</button>
          </view>
        </view>

        <view class="popup-coupon" v-show="PopupIndex==2">
          <view class="popup-title">{{ $t('促销') }}</view>
          <view class="coupon-list"
                @click="getnav(`/pagesC/goods/huodongDate?shop_id=${product.shop_id}&prom_id=${huodong.prom_id}&goods_id=${goodsId}`)">
            <view class="cuxiao">
              <text class="title">{{ $t('促销') }}</text>
              <view class="content">
                <view style="font-size:22rpx">{{ huodonginfo.promotion_name }}</view>
                <view style="color:#999;margin-top:10rpx;">{{ huodonginfo.time }}</view>
              </view>
              <i class="iconfont icon_e60c"></i>
            </view>
          </view>

          <view class="popup-com">
            <button @click="hidePopup">{{ $t('确定') }}</button>
          </view>
        </view>

        <view class="popup-coupon" v-show="PopupIndex==3">
          <view class="popup-title">{{ $t('基础保障') }}</view>
          <view class="coupon-list">
            <view class="guarantee" v-for="(serlstList,serlstKey) in serlst" :key="serlstKey">
              <image/>
              <view class="guar-cont">
                <view>{{ serlstList.ser_name }}</view>
                <view style="color:#999;margin-top:10rpx;">{{ serlstList.ser_remark }}</view>
              </view>
            </view>

          </view>

          <view class="popup-com">
            <button @click="hidePopup">{{ $t('确定') }}</button>
          </view>
        </view>

        <view class="popup-coupon" v-show="PopupIndex==5">
          <view class="grace-product-attr">
            <form @submit="attrSubmit" class="grace-form">
              <!-- 关闭按钮  -->
              <view class="grace-product-attr-close" @click="closeAttr">
                <text class="grace-iconfont icon-close2"></text>
              </view>
              <!-- 头部商品信息 -->
              <view class="grace-product-attr-info" style="height:240rpx;">
                <image :src="product.thumb_url" @click="previewImgs([{img_url:product.thumb_url}])"
                       style="width:200rpx;height:200rpx"></image>
                <view class="title">
                  <div
                      style="color:#FF1212;font-size:40rpx;dispaly:inline-block;margin: 0;padding: 0">
											<span v-if="product.is_activity == 0 || product.is_activity == 1">
												￥{{js_shop_price}}
											</span>
                    <span v-if="product.is_activity == 2">
												<span></span> {{ product.integral }}{{ $t('积分') }}+{{ $t('￥') }}{{ product.zs_shop_price }}
											</span>
                    <span v-if="product.is_activity == 3 && isPT == 1">
												￥{{ activity_info.dandu_button_price }}
											</span>
                    <span v-if="product.is_activity == 3 && isPT == 2">
												￥{{ product.zs_market_price }}
											</span>
                    <span class="tag-name"
                          v-if="product.is_activity == 3 &&(isPT == 2 || isPT == '')">{{ $t('拼团') }}</span>

                    <text class="activity_info tag-name"
                          v-if="product.is_activity == 1">{{ $t('秒杀') }}
                    </text>
                  </div>

                  <div style="font-size:24rpx;line-height:60rpx;">{{ $t('库存') }} : {{ stock }}{{ $t('件') }}</div>
                  <view>{{ selectText }} {{ guige }}</view>
                </view>
              </view>
              <!-- 属性列表区 -->
              <view style="height:calc(100% - 250px); overflow-y:auto;">
                <view class="grace-product-attr-list" v-for="(item,index) in specList" :key="index">
                  <view class="title">{{ item.title }}</view>
                  <view class="grace-select-tips">
                    <view name="type" class="select">
                      <view class="select-items u-m-8"
                            @click="changeSpec(item.title, its.name, its.able, its.id, index)"
                            v-for="(its, ins)  in item.list"
                            :class="[its.able == false ? 'disable-spec-tiem' : its.check == true ? 'grace-checked-color' : '']">
                        <image v-if="its.thumb" class="img" :src="its.thumb"/>
                        {{ its.name }}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="grace-items" style="margin-top:8px;">
                  <view class="grace-label">{{ $t('购买数量') }}</view>
                  <!-- input 用于记录购买数量隐藏形式并参与表单提交 -->

                  <uni-number-box v-if="product.is_activity === 1" :value="buyNum" :min="1"
                                  :max=" activity_info == '' ? 10000: activity_info.xznum"
                                  v-on:change="buyNumChange"></uni-number-box>
                  <uni-number-box v-else :value="buyNum" :min="1" :max="1000000"
                                  v-on:change="buyNumChange"></uni-number-box>
                </view>
              </view>
              <view class="pt-tip" v-if="isPT == 2 && product.is_activity != 3">
                {{ $t('抱歉所选商品规格不能发起拼团，仅支持单独购买') }}
              </view>
              <view class="grace-product-attr-btn" v-if="isPT == '' && product.is_activity != 3">
                <u-button shape="circle" type="warning" @click="submitOrder(false, 1)">确定</u-button>
              </view>

              <view class="grace-product-attr-btn" v-if="isPT == 1">
                <button type="warn" @click="submitOrder(false, 1)">{{ $t('单独购买') }}</button>
              </view>
              <view v-if="isPT == 2 && product.is_activity != 3"></view>
              <view class="grace-product-attr-btn flex" v-if="isPT == 2">
                <button type="warn" class="flex1" v-if="product.is_activity == 3"
                        @click="submitOrder(false, 2)">{{ getBtnText }}
                </button>

                <button type="warn" @click="submitOrder(true)" class="flex1"
                        v-if="product.is_activity != 3">{{ $t('加入购物车') }}
                </button>
                <button type="warn" class="flex1 right-htn" @click="submitOrder(false, 1)"
                        v-if="product.is_activity != 3" style="margin-left: 20rpx;">{{ $t('立即购买') }}
                </button>

              </view>
            </form>
          </view>
        </view>
      </popup-layer>

    </view>

    <view class="fight-group__step" style="height: auto" v-if="product.is_activity == 3">
      <view class="fight-group__step--header">
        <view class="middle">{{ $t('立即参加Ta人的已开团，可快速成团') }}</view>
        <i class="iconfont icon_e60c"></i>
      </view>
      <view class="fight-group__list" v-for="(item, index) in userList" :key="index">
        <u-avatar :src="item.headimgurl" size="mini"></u-avatar>
        <view class="fight-group__list--middle">
          <h2>{{ item.user_name }}</h2>
          <span>{{ $t('还差') }}{{ item.pin_num - item.tuan_num }}{{ $t('人') }}</span>
          <u-count-down class="u-m-l-20" :timestamp="returnRemainTimeout(item.timeout)" font-size="28"
                        color="#606266" :show-days="false"></u-count-down>
          {{ $t('后结束') }}
        </view>
        <view class="fight-group__list--item" @click="assembleActivityStatus(item.id)">{{ $t('拼团') }}</view>
      </view>
    </view>
    <!-- 拼团 -->
    <view class="fight-group__step" v-if="product.is_activity == 3">
      <view class="fight-group__step--header" @click="getnav('/pagesC/goods/assembleRule')">
        <view class="middle">{{ $t('查看拼团规则') }}</view>
        <i class="iconfont icon_e60c"></i>
      </view>
      <!-- <view class="fight-group__step--middle">
        <image :class="[item.pin_type == 1 ? 'user-active' : '']" :src="item.headimgurl"
          v-for="(item, index) in avatarList.imgs" :key="index"></image>
        <view>{{ avatarList.title }}</view>
      </view> -->
      <view class="fight-group__step--list">
        <view class="fight-group__step--item step-item__active">
          <image src="../../static/images/img/fight-group.png"/>
          <text>{{ $t('发起拼团') }}</text>
        </view>
        <view class="fight-group__step--item"
              :class="[activity_info.zhuangtai > 0 ? 'step-item__active' : '']">
          <image
              :src="activity_info.zhuangtai > 0 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'"/>
          <text>{{ $t('邀请好友参团') }}</text>
        </view>
        <view class="fight-group__step--item"
              :class="[activity_info.zhuangtai == 2 ? 'step-item__active' : '']">
          <image
              :src="activity_info.zhuangtai == 2 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'"/>
          <text>{{ $t('拼团成功') }}</text>
        </view>
      </view>
    </view>


    <!-- 进店 -->
    <view class="enterShop">
      <!-- <i class="iconfont icon_e678"></i> -->
      <view class="entershop-wrap"
            @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:shopinfos.id}})">
        <u-avatar class="u-m-r-15" :src="shopinfos.logo" show-level></u-avatar>
        <view class="entershop-middle u-m-l-20">
          <view class="u-font-lg  u-m-b-10 entershop-middle-name">{{ shopinfos.shop_name }}</view>
          <text class="u-font-sm" :style="{color:$u.color['tipsColor']}">{{ shopinfos.shop_desc }}</text>
        </view>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
      <view class="u-flex">

        <view v-for="goods in shopinfos.goods_list" :key="goods.id"
              class="shopInfoRecommend u-flex u-row-center"
              @click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:goods.id}})">
          <u-image class="u-m-b-10" :src="goods.thumb_url" width="160rpx" height="160rpx"
                   border-radius="12" mode="widthFix"/>
          <text class="u-line-1 u-font-sm">{{ goods.goods_name.slice(0, 6) + '..' }}</text>
        </view>


      </view>
      <div class="u-flex u-row-center  u-m-t-25">
        <u-tag :text="$t('联系客服')" shape="circle" class="u-m-r-30" @click="chat" type="info"/>

      </div>

    </view>
    <!-- 评论 -->
    <!-- <view class="grace-product-info">
      <view class="u-flex u-col-center u-row-between u-m-b-20"
        @click="$u.route({url:'/pagesC/goodsComment/index',params:{id:goodsId}})">
        <h2 class="u-item-title comment-title">
          <view class="u-item-title-left"></view>
          {{$t('评价')}} <span class="comment-count">{{commentTotal+'+'}}</span></h2>
        <u-icon name="arrow-right" color="#999" size="24"></u-icon>
      </view>
      <block v-for="item in GoodsCommentList" :key="item.id">
        <div class="commetItem">
          <div class="head ">
            <div class=" leftWrap">
              <image class="avatar" :src="item.headimgurl" mode="aspectFill"> </image>
              <div>
                <p>{{item.user_name?item.user_name:$t('匿名')}}</p>
                <u-rate :value="item.goods_star" active-color="#ffa468" disabled></u-rate>
              </div>
            </div>
            <span class="time">{{item.createtime.slice(0,10) }}</span>
          </div>

          <div class="star">

          </div>
          <p class="content">{{item.content}}</p>
          <div class="imgWrap">
            <block v-for="(img, index2) in item.imgurl" :key="index2">
              <u-image :src="img" mode="widthFix" @click="previewImgs(item.imgurl,index2)"
                width="240" height="240" border-radius="8"> </u-image>
            </block>
          </div>
        </div>
      </block>

      <u-empty :text="$t('暂无评论')" :src="getNocommentSrc" icon-size="280" v-if="GoodsCommentList.length===0">
      </u-empty>
    </view> -->

    <view class="grace-product-info goodsDetailsImgs">
      <view class="u-flex u-col-center u-row-between u-m-b-20">
        <h2 class="u-item-title">
          <view class="u-item-title-left"></view>
          {{ $t('详情') }}
        </h2>
      </view>
      <u-table v-if="datainfo.goods_param !=''" class="param-table" align="left" padding="10rpx 20rpx">
        <u-tr>
          <u-td class="param-title">{{ $t('参数') }}</u-td>
        </u-tr>
        <u-tr v-for="(item,index) in datainfo.goods_param">
          <u-td width="30%">{{ item.title }}</u-td>
          <u-td width="70%">{{ item.value }}</u-td>
        </u-tr>
      </u-table>
      <u-parse :html="product.goods_desc"></u-parse>
    </view>


    <view style="height:60px;"></view>
    <!-- 底部 -->
    <view class="u-flex u-row-between footerWrap u-p-15">
      <view style="width:40%;" class="u-flex u-row-between u-p-l-15 u-p-r-15">

        <u-icon @click="chat" name="server-fill" color="#333" size="40" :label="$t('客服')" label-pos="bottom"
                label-size="24"></u-icon>
        <u-icon @click="getnav('/pagesC/shop/storeDetails?shop_id='+ shopinfos.id)" name="bookmark"
                color="#333" size="40" :label="$t('店铺')" label-pos="bottom" label-size="24"></u-icon>
        <u-icon @click="getTab('/pages/tabBar/cart')" name="shopping-cart" color="#333" size="40"
                :label="$t('购物车')" label-pos="bottom" label-size="24"></u-icon>
      </view>
      <!-- 正常显示 没有活动 -->
      <div class="u-flex " v-if="product.is_activity != 3">
        <view class="productBuyBtn leftBtn" @click="buyNow(true, '')" v-if="product.is_activity != 2">
          {{ $t('加入购物车') }}
        </view>
        <view class="productBuyBtn rightBtn" v-if="product.is_activity != 2" @click="buyNow(false, '')">
          {{ $t('立即购买') }}
        </view>
        <view class="productBuyBtn integralBtn" v-if="product.is_activity == 2" @click="buyNow(false, '')">
          {{ $t('立即兑换') }}
        </view>
      </div>
      <!--  有活动-->
      <view class="u-flex" v-if="product.is_activity == 3">

        <view class="singleBuyBtn" @click="buyNow(false, 1)">
          <view class="u-font-bold">{{ $t('单独购买') }}</view>
          <text>¥{{ activity_info.dandu_button_price }}</text>
        </view>
        <view class="teamBuyBtn" :class="[getBtnText === $t('邀请好友') ? 'right-htn__active' : '' ]"
              @click="buyNow(false, 2)">
          <view class="u-font-bold">{{ getBtnText }}</view>
          <text v-if="getBtnText != $t('邀请好友')">¥{{ activity_info.pintuan_button_price }}</text>
        </view>
      </view>

    </view>

  </view>

  <view class="rightMenu" v-if="isMPWixin">
    <button class="weshareBtn" open-type="share">
      <u-icon class="rightMenuicon" name="weixin-fill" color="#3BB133" size="48"></u-icon>
    </button>
  </view>
  <view class="skeleton" v-if="skeleton == 'show'">
    <image :src="imgSTATICURL+'images/skeleton-img.png'"></image>
  </view>

  <u-popup v-model="isJoinBuyTeam" v-if="joinAGroup.tz" mode="center" border-radius="14" width="80%"
           :closeable="true">
    <view class="buyTeamWrap">
      <p class="title">{{ $t('参与') }} {{ joinAGroup.tz.user_name }}{{ $t('的拼单') }}</p>
      <p class="remainder">{{ $t('仅剩') }}{{ joinAGroup.pin_num - joinAGroup.tuan_num }}{{ $t('个名额') }}，
        <u-count-down :timestamp="returnRemainTimeout(joinAGroup.timeout)" :show-border="true"
                      font-size="28" color="#606266" border-color="transparent"></u-count-down>
        {{ $t('后结束') }}
      </p>
      <u-avatar :src="joinAGroup.tz.headimgurl"></u-avatar>
      <u-button type="error" style="margin-top:20rpx" @click="joinGroup(joinAGroup.assem_number)"> {{ $t('拼团') }}
      </u-button>
    </view>
  </u-popup>
  <u-toast ref="uToast"/>
  <shareMask ref="shareMask" @onCloseMask="onCloseMask"/>
  <view class="hideCanvasView">
    <canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
            :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
  </view>
</view>
</template>

<script>
import uniNumberBox from '../../components/uni-number-box.vue'
import goodsCard from '@/components/goodsCard'
import shareMask from '@/components/shareMask'
import _app from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
import {
  getSharePoster
} from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';

let pinid, canvasImg = '';
let shopId = null // 商品 id
let arr = []
let buyNowNum = ''
//记录用户选择的属性
let strRadio = []
var dateObj = new Date();

export default {
  components: {
    uniNumberBox,
    goodsCard,
    shareMask
  },
  data() {
    return {
      imgSTATICURL: this.STATICURL,
      heightImg: '330px',
      datainfo: {
        goods_param: [],
        share_url: ''
      },
      isJoinBuyTeam: false,
      swiperItems: [], // 轮播图
      product: '', // 商品详情
      goodsThumb: '',
      shopinfos: '', // 商家店铺
      guige: '',
      couponinfos: '', // 商品优惠券
      huodong: '', // 活动
      sertions: '', // 服务
      specs: [], // 商品属性
      getcouponlst: [], //优惠券列表
      huodonginfo: '', // 活动促销列表
      serlst: [], // 商品服务列表
      goodsId: null, // 商品 id
      activity_info: '', // 限时秒杀
      active: 1,
      stock: 0, //  获取库存信息
      buyNum: 1,
	  isSelectAttr: 0,// 是否选择规格
	  js_shop_price: 0, //累计商品价格
      activity_time: {}, // 秒杀时间
      pin_id: '',
      tuan_id: '',
      PopupIndex: 0,
      userList: [],
      userCartNum: 0,
      choosePinNum: '',
      isPT: '',
      isJoin: false,
      skeleton: 'show',
      isMPWixin: false,
      valueStatus: 0, // 更新页面状态 防止页面卡死
      GoodsCommentList: [],
      currentIndex: 0,
      tmeImg: '',
      swiperIndex: 0,
      joinAGroup: {},
      selectText: '',
      specList: [],
      skuList: [],
      selectSpec: {}, // 选择数据的对象 将已选的数据放在这个对象里面记录下来
      commentTotal: 0,
      background: {
        backgroundColor: '#f43530',
        // 导航栏背景图
        // background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
        // 还可以设置背景图size属性
        // backgroundSize: 'cover',
        // 渐变色
        // backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
      },
      headTablist: [{
        name: this.$t('商品'),
        selector: '.swiper',
      },
        // {
        // 	name: this.$t('评价'),
        // 	selector: '.comment-title',
        // },
        {
          name: this.$t('详情'),
          selector: '.goodsDetailsImgs',
        }
      ],
      headTabCurrent: 0,
      scrollTop: 0,
      isReady: false,
      poster: {},
      posterImage: '',
      canvasId: 'default_PosterCanvasId',
      source: '',//页面来源
      myuserinfo: {},
      inviterInfo: {},
      inviterID: '',
      wecode: '',
    };
  },

  async onLoad(option) {
    // var id = Math.random().toString(16).substr(2);
    // var canvasId = 'myCanvasId_' + id;
    // this.canvasId = canvasId;
    //#ifdef MP-WEIXIN
    this.isMPWixin = true;
    //#endif
    console.log(option);

    if (option) {
      pinid = option.pin_id || ''
      if (pinid) {
        this.assembleActivityStatus(pinid)
      }
      shopId = option.id
      this.goodsId = option.id
      this.userCartNum = this.$store.state.userCartNum
      await this.getGoodsInfo()
	  this.getStyle()
      this.getGoodsCommentList()
      strRadio = []
      if (typeof (option.source) != 'undefined' && option.source == 'assemble') {
        this.source = option.source;
      }
      // 初始化时获取小程序秘钥code 换取openId  （仅在初始化时获取一次，不要放在事件中重复获取会解密失败）
      // #ifdef MP-WEIXIN
      if (option.fromUserId) {
        this.inviterID = option.fromUserId;
        if (!uni.getStorageSync('token')) {
          uni.login({
            provider: "weixin",
            success: loginRes => {
              this.wecode = loginRes.code
              this.wechatLogin();
            }
          });
        } else {
          this.bindGoodFromUser();
        }
      }
      // #endif

    }

  },

  onBackPress() {
    if (this.source == 'assemble') {
      uni.switchTab({
        url: "/pages/tabBar/home"
      })
      return true;
    }
  },

  computed: {
	
    getNocommentSrc() {
      return this.STATICURL + 'images/nullStatus/icon-comments.png'
    },
    avatarList() {
      if (this.activity_info.assem_type == 1) {
        if (this.activity_info.zhuangtai === 2) {
          return {
            imgs: this.activity_info.member_assem,
            title: this.$t('拼团成功')
          }
        }

        return {
          imgs: this.activity_info.member_assem,
          title: this.$t('开团后邀请好友组团')
        }
      }

      if (this.activity_info.assem_type == 2) {
        return {
          imgs: this.activity_info.member_assem,
          title: this.activity_info.member_assem[0].pin_type == 1 ?
              `${this.$t('欢迎来到')}${this.activity_info.member_assem[0].user_name}${this.$t('开的团')}` : this.$t('欢迎参团')
        }
      }

      if (this.activity_info.assem_type == 3) {
        return {
          imgs: this.activity_info.member_assem,
          title: this.$t('邀请好友参团')
        }
      }
    },
    getBtnText() {
      if (this.activity_info.assem_type == 1 && !this.isJoin) {
        return this.$t('发起拼团')
      }

      if (this.activity_info.assem_type == 2 || this.isJoin) {
        return this.$t('立即参团')
      }

      if (this.activity_info.assem_type == 3 && !this.isJoin) {
        return this.$t('邀请好友参团')
      }
    },
    getPrice() {
      if (this.isPT == 2 || this.isPT == '' || this.fangshi == 1) {
        return `${this.$t('￥')}${this.product.zs_shop_price}`
      }
      if (this.isPT == 1) {
        return `${this.$t('￥')}${this.activity_info.dandu_button_price}`
      }
    }
  },

  watch: {},

  async onShareAppMessage(res) {

    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      try {
        const myuserinfo = JSON.parse(userInfo)

        return {
          title: this.product.goods_name,
          path: '/pagesC/goods/goodsDetails?id=' + shopId + '&fromUserId=' + myuserinfo.id,
          imageUrl: this.product.thumb_url
        }
      } catch (e) {

      }
    }

    return {
      title: this.product.goods_name,
      path: '/pagesC/goods/goodsDetails?id=' + shopId,
      imageUrl: this.product.thumb_url
    }

  },
  onShareTimeline() {

    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      try {
        const myuserinfo = JSON.parse(userInfo)
        return {
          title: this.product.goods_name,
          query: 'id=' + shopId + '&fromUserId=' + myuserinfo.id,
          imageUrl: this.product.thumb_url
        }
      } catch (e) {

      }
    }

    return {
      title: this.product.goods_name,
      query: 'id=' + shopId,
      imageUrl: this.product.thumb_url
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    bindGoodFromUser() {
      this.$http.recordGoodFromUser({
        goods_id: this.goodsId,
        parent_user_id: this.inviterID
      });
    },
// #ifdef MP-WEIXIN
    // 微信小程序登录   code换区 小程序openid 和 session_key
    getOpenID() {
      return new Promise((resolve) => {
        this.$http.getWechatMiniProgramOpenid({
          code: this.wecode
        }).then(res => {
          resolve(res.data)
        });
      })
    },
    async wechatLogin() {
      const {openid = '', session_key = '', unionid = ''} = await this.getOpenID()
      uni.setStorageSync('xcxOpenid', openid); //存取小程序openid
      uni.setStorageSync('xcxSessionKey', session_key);
      this.asyncUserInfo(openid, unionid);

    },
    asyncUserInfo(openid = '', unionid = '') {
      if (openid == '') {
        return false;
      }
      this.$http.thirdLogin({
        oauth: 'weixin_mp',
        openid: openid,
        unionid: unionid,
        nick_name: this.nickName,
        uniongender: this.gender,
        iconurl: this.avatarUrl,
        inviter: this.inviterID,
        from: this.goodsId
      }).then(result => {
        this.$toast(result.status)
        if (result.status == 200) {
          this.$store.commit('loginStatus', true)
          uni.setStorageSync('token', result.data.token);
          uni.setStorageSync('identity', result.data.identity);
          uni.setStorageSync('role', result.data.role);
          uni.setStorageSync('role_id', result.data.shop_id);
          this.bindGoodFromUser();
        }
        if (result.status == 400 || result.data.info == 'unregister') {
          this.$u.route({
            url: 'platforms/mp-weixin/miniLogin',
            params: {
              oauth: 'weixin_mp',
              openid: openid,
              unionid: unionid,
              nick_name: '微信用户',
              uniongender: '',
              iconurl: '',
              inviter: this.inviterID,
              from: this.goodsId
            }
          });
        }
      })
    },
    // #endif
    backFun() {
      this.$u.toast('Hello uView!');
      uni.navigateBack({
        fail: function (e) {
          uni.switchTab({
            url: '/pages/tabBar/home'
          });
        }
      });
    },
    previewImgs(list = [], index = 0) {
      let urls = [];

      list.forEach(function (v, k) {
        urls.push(v.img_url)
      })

      uni.previewImage({
        urls,
        current: index
      });
    },
    qrCode() {
      return new Promise((resolve, reject) => {
        this.$refs.uQRCode.toTempFilePath({
          success: res => {
            resolve(res.tempFilePath)
          }
        })
      })
    },
    makePoster() {
      this.openPoster()
      let os = uni.getSystemInfoSync().platform;
      if (os == 'ios') { // ios存在兼容问题，需要调用两次openPoster()
        setTimeout(() => {
          this.openPoster()
        }, 600); // 延时需要大于drawDelayTime
      }
    },
    async openPoster() {

      try {
        const {
          img_url: mainImg = ''
        } = this.swiperItems[0] || {}
        const {
          zs_shop_price = '', goods_name = ''
        } = this.product
        // _app.showLoading('海报生成中...')
        const d = await getSharePoster({
          _this: this, //若在组件中使用 必传
          type: 'ShareType',
          formData: {
            //访问接口获取背景图携带自定义数据
          },
          posterCanvasId: this.canvasId, //canvasId
          delayTimeScale: 20, //延时系数
          drawDelayTime: 500,
          background: {
            width: 1080,
            height: 1620,
            backgroundColor: '#FFF'
          },
          drawArray: ({
                        bgObj,
                        type,
                        bgScale
                      }) => {
            const dx = bgObj.width * 0.3;
            const fontSize = bgObj.width * 0.045;
            const lineHeight = bgObj.height * 0.04;
            //可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
            return new Promise((rs, rj) => {
              rs([{
                type: 'custom',
                setDraw(Context) {
                  Context.setGlobalAlpha(1);
                }
              },
                {
                  type: 'image',
                  url: mainImg,
                  alpha: 1,
                  dx: 0,
                  dy: fontSize + 70,
                  // mode: 'aspectFit',
                  infoCallBack(imageInfo) {
                    let scale = bgObj.width * 0.2 / imageInfo
                        .height;
                    return {
                      dWidth: bgObj.width, // 因为设置了圆形图片 所以要乘以2
                      dHeight: bgObj.width,
                    }
                  }
                },
                {
                  type: 'text',
                  text: '🍃 ' + this.$t('推荐一个好物给你，请查收') + ' 🍃',
                  size: fontSize,
                  color: '#666',
                  alpha: 1,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  infoCallBack(textLength) {
                    return {
                      dx: (bgObj.width - textLength) / 2,
                      dy: 60
                    }
                  }
                },
                {
                  type: 'text',
                  text: goods_name,
                  size: fontSize,
                  color: '#333',
                  alpha: 1,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  lineFeed: {
                    maxWidth: bgObj.width * 0.6,
                    lineHeight: fontSize + 10,
                    lineNum: 3
                  },
                  infoCallBack(textLength) {
                    return {
                      dx: bgObj.width * 0.3,
                      dy: bgObj.width + fontSize + 170
                    }
                  },
                  serialNum: 0,
                  id: 'tag1' //自定义标识
                },
                {
                  type: 'text',
                  fontStyle: 'italic',
                  text: this.$t('￥') + zs_shop_price,
                  size: fontSize,
                  color: '#FE5000',
                  alpha: 1,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  serialNum: 1,
                  allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
                                    drawArray
                                  } = {}) {
                    const obj = drawArray.find(item => item.id ===
                        'tag1');
                    /* return {
                      dx: obj.dx,
                      dy: obj.dy + lineHeight
                    } */
                    //也可以return promise对象
                    return new Promise((rs, rj) => {
                      setTimeout(() => {
                        rs({
                          dx: obj.dx,
                          dy: obj
                                  .dy +
                              fontSize +
                              150
                        });
                      }, 1);
                    });
                  }
                },
                {
                  type: 'text',
                  text: this.$t('扫码查看详情'),
                  size: fontSize * 0.6,
                  color: '#333',
                  alpha: 1,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  infoCallBack(textLength) {
                    return {
                      dx: 70,
                      dy: bgObj.width + fontSize + 170 + bgObj
                          .width * 0.2
                    }
                  }
                },
                {
                  type: 'qrcode',
                  text: this.datainfo.share_url,
                  size: bgObj.width * 0.2,
                  dx: bgObj.width * 0.05,
                  dy: bgObj.width + fontSize + 140
                }
              ]);
            })
          },
          setCanvasWH: ({
                          bgObj,
                          type,
                          bgScale
                        }) => { // 为动态设置画布宽高的方法，
            this.poster = bgObj;
          }
        });
        console.log(d.poster.tempFilePath);
        _app.log(this.$t('海报生成成功, 时间') + ':' + new Date() + '， ' + this.$t('临时路径') + ': ' + d.poster.tempFilePath)
        this.posterImage = d.poster.tempFilePath;
        this.$refs.shareMask.shareImg = d.poster.tempFilePath
        this.$refs.shareMask.shareLink = this.datainfo.share_url
        this.$refs.shareMask.shareModel = true
      } catch (e) {
        _app.hideLoading();
        _app.showToast(JSON.stringify(e));
        console.log(JSON.stringify(e));
      }
    },

    onCloseMask() {
      this.isReady = false
    },
    pageScrollTo(selector, index) {
      this.headTabCurrent = index
      this.$u.getRect(selector).then(res => {
        uni.pageScrollTo({
          scrollTop: this.scrollTop + res.top - 110,
          duration: 200
        })
      })
    },
    swiperChange(e) {
      this.swiperIndex = e
    },
    preview(urls, index) {
      uni.previewImage({
        urls: urls,
        current: index,
        indicator: 'number'
      });
    },
    returnRemainTimeout(item) {
      return item - new Date().getTime() / 1000
    },
    assembleActivityStatus(id) {
      this.$http.assembleActivityStatus({
        pindan_id: id
      }).then(res => {
        this.joinAGroup = res.data
        if (res.status === 200) {
          this.isJoinBuyTeam = true
        } else {
          this.$refs.uToast.show({
            title: `${this.joinAGroup.tz.user_name}${this.$t('发起的拼团已结束')}`,
            type: 'error',
            duration: 3500
          })
        }
      })
    },
    getNetworkImage() {
      let url = this.product.thumb_url
      console.log("-> url", url);
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url,
          success: (e) => {
            const p = e.tempFilePath
            if (p.indexOf('json') > -1) {
              reject(p)
              return false
            }
            resolve(p)
          },
          fail: (r) => {
            reject(r)
          }
        })
      })
    },


    getGoodsCommentList() {
      const data = {
        goods_id: this.goodsId
      }
      this.$http.getGoodsCommentList(data).then(res => {
        if (res.status === 200) {
          const {
            data,
            total
          } = res.data
          this.commentTotal = total
          this.GoodsCommentList = data
        }
      })
    },
    closePopup() {
      this.isJoin = false
    },
    joinGroup(num) {
      this.isJoinBuyTeam = false
      this.isJoin = true
      this.PopupIndex = 5
      this.isPT = 2
      this.choosePinNum = num
      this.$refs.popupRef.show()
    },
    hidePopup() {
      this.isJoin = false
      this.$refs.popupRef.close() // 关闭

    },
    // 1 优惠劵  2 活动 3 服务
    async coupon(index) {

      this.PopupIndex = index
      this.$refs.popupRef.show() // 弹出
      if (this.PopupIndex === 1) {
        this.$loading()
        this.$http.getcouponlst({
          shop_id: this.product.shop_id
        }).then(res => {
          if (res.status == 200) {
            this.getcouponlst = res.data.data
          }
        })
      }
      if (this.PopupIndex === 2) {
        this.$loading()
        this.$http.gethuodonginfo({
          shop_id: this.product.shop_id,
          goods_id: shopId,
          prom_id: this.huodong.prom_id
        }).then(res => {
          if (res.status == 200) {
            this.huodonginfo = res.data
          }
        })
      }
      if (this.PopupIndex === 3) {
        this.$loading()
        this.$http.getserlst({
          shop_id: this.product.shop_id,
          goods_id: shopId
        }).then(res => {
          if (res.status == 200) {
            this.serlst = res.data
          }
        })
      }

    },
    /**
     * 立即领取优惠劵
     */
    Receive(id) {
      let isLogin = this.getIsLogin() // 判断是否登录
      if (!isLogin) {
        return false
      } // 判断是否登录
      this.$loading()
      this.$http.getcoupons({
        coupon_id: id,
        shop_id: this.product.shop_id
      }).then(res => {
        if (res.status == 200) {
          this.$toast(res.mess)
          this.getcouponlst.forEach(element => {
            if (element.id == id) {
              element.have = 1
            }
          });
        }
      })
    },
    getGoodsInfo() {
      this.$loading()
      this.$http.getGoodsInfo({
        goods_id: this.goodsId,
      }).then(res => {
        if (res.status == 200) {
          this.datainfo = res.data
          this.swiperItems = res.data.gpres
          this.product = res.data.goodsinfo
		  this.js_shop_price = res.data.goodsinfo.zs_shop_price
          this.goodsThumb = res.data.goodsinfo.thumb_url
          this.shopinfos = res.data.shopinfos
          this.couponinfos = res.data.couponinfos
          this.huodong = res.data.huodong
          this.sertions = res.data.sertions
          this.specs = res.data.specs
          this.originSpecList = res.data.formatSpecList
          this.specList = res.data.formatSpecList
          this.skuList = res.data.formatSkuList
          this.stock = res.data.pronum
          this.pin_id = res.data.pin_id
          this.tuan_id = res.data.tuan_id
          this.userList = res.data.memberpinres

          if (this.specList.length > 0) {
            // 初始化选择数据的对象
            this.specList.forEach(item => {
              this.$set(this.selectSpec, item.title, "");
            })
            // 将规格数据处理成我们视图所需要的数据类型
            this.specList = this.specList.map(item => {
              return {
                title: item.title,
                list: item.list.map(its => {
                  return {
                    id: its.id,
                    name: its.title,
                    thumb: its.thumb,
                    // 判断是否可以选择
                    able: this.isAble(item.title, its
                        .title
                    ) // 注释的调试看逻辑代码 false
                  }
                })
              }
            })
          }


          if (res.data.goodsinfo.hasoption == 1) {
            this.selectText = this.$t('请选择');
          } else {
            this.selectText = '';
          }

          if (res.data.activity_info.length != 0) {
            this.activity_info = res.data.activity_info
          }

          let str = ''
          if (res.data.specs) {
            res.data.specs.forEach((i, index) => {
              let connectStr = res.data.specs.length - 1 === index ?
                  '' : ';'
              this.guige = this.guige + i.title + connectStr
            })
          }


          /**
           * 更新页面状态 防止页面卡死
           */
          setTimeout(() => {
            this.skeleton = 'hide'
          }, 200)
          this.statusMath(this)
        }
        if (res.status == 400) {
          console.log(res)
        }

      })

    },

    // 判断规格是否可以被选择  核心函数 key当前的规格的title   value规格值
    isAble(key, value) {
      // 深拷贝 避免被影响
      var copySelectSpec = JSON.parse(JSON.stringify(this.selectSpec));
      // 用对象的好处就在这了 直接赋值当前验证项
      copySelectSpec[key] = value;
      // 用数组的 some 方法 效率高 符合条件直接退出循环
      let flag = this.skuList.some(item => {
        // 条件判断 核心逻辑判断
        // console.log(item)
        var i = 0;
        // 这个for in 原理就是循环已经选中的 和 正在当前对比的数据 和 所有的sku对比 只有当前验证的所有项满足sku中的规格或者其他规格为空时 即满足条件 稍微有点复杂 把注释的调试代码打开就调试下就可以看懂了
        for (let k in copySelectSpec) {
          //  console.log(copySelectSpec[k])  // 注释的调试看逻辑代码
          if (copySelectSpec[k] != "" && item.specs.includes(copySelectSpec[k])) {
            // console.log(item)
            i++
          } else if (copySelectSpec[k] == "") {
            i++;
          }
        }
        // 符合下面条件就退出了 不符合会一直循环知道循环结束没有符合的条件就 return false 了
        // console.log(i) // 注释的调试看逻辑代码
        return i == this.specList.length
      })
      return flag
    },

    changeSpec(key, value, able, spec_item_id, index) {
      if (!able) return
      if (this.selectSpec[key] === value) {
        this.selectSpec[key] = ''
      } else {
        this.selectSpec[key] = value
      }
      console.log(this.selectSpec, key)
      // forEach循环改变原数组
      this.specList.forEach(item => {
        item.list.forEach(its => {
          its.able = this.isAble(item.title, its.name);
        });
      });


      let radioObject = this.specList
      strRadio = []
      let guigearr = []

      for (var i = 0; i < radioObject[index].list.length; i++) {
        if (radioObject[index].list[i].id == spec_item_id) {
          if (radioObject[index].list[i].thumb) {
            this.product.thumb_url = radioObject[index].list[i].thumb + "?" + Math.random()
          } else {
            this.product.thumb_url = this.product.thumb_url + "?" + Math.random()
          }
          radioObject[index].list[i].check = true;
        } else {
          radioObject[index].list[i].check = false;
        }
      }
      let specLengthArr = [];
      let temp = '';
      let tempStr = '';
      for (var i = 0; i < radioObject.length; i++) {
        specLengthArr.push(radioObject[i].list.length)
        for (var j = 0; j < radioObject[i].list.length; j++) {
          if (radioObject[i].list[j].check && radioObject[i].list[j].check == true) {
            strRadio.push(radioObject[i].list[j].id)
            if (!guigearr.includes(radioObject[i].title + ":" + radioObject[i].list[j]
                .name)) {
              guigearr.push(radioObject[i].title + ":" + radioObject[i].list[j].name)
            }
          }
        }
      }

      if (radioObject.length == strRadio.length) {
        // 将选中的商品规格id重新排序，与后端保持一致
        for (var i = 0; i < specLengthArr.length - 1; i++) {
          if (specLengthArr[i] > specLengthArr[i + 1]) {
            temp = specLengthArr[i]
            specLengthArr[i] = specLengthArr[i + 1]
            specLengthArr[i + 1] = temp
            tempStr = strRadio[i]
            strRadio[i] = strRadio[i + 1]
            strRadio[i + 1] = tempStr
          }
        }

        this.selectText = this.$t('已选')
        this.$http.getGoodsPrice({
          goods_attr: strRadio.join('_'),
          goods_id: shopId,
          fangshi: this.isPT != 1 && this.product.is_activity == 3 ? 2 : 1,
          pin_number: this.choosePinNum
        }).then(res => {
          if (res.status == 200) {
            this.stock = res.data.attrinfos.stock
            this.pin_id = res.data.pin_id
            this.tuan_id = res.data.tuan_id
            this.guige = guigearr.join(';')
            this.isJoin = false
            this.userList = res.data.memberpinres
            if (res.data.activity_info.length != 0) {
              this.activity_info = res.data.activity_info
            }
            this.buyNum = 1
            this.isSelectAttr = 1
            // if ((res.data.fangshi != 1 && this.isPT != 1) || !this.isPT || this.isPT == 2 &&
            // 	res.data.fangshi == 1) {
            // 	this.product.is_activity = res.data.attrinfos.is_activity
            // }

            this.product.goods_name = res.data.attrinfos.goods_name
            this.product.zs_shop_price = res.data.attrinfos.zs_shop_price
            this.js_shop_price = res.data.attrinfos.zs_shop_price
            if (this.isPt = 1) {
              this.activity_info.dandu_button_price = res.data.attrinfos.zs_shop_price
            }
            if (this.isPt = 2) {
              this.product.zs_market_price = res.data.attrinfos.zs_shop_price
            }


          }
        })
      }

    },

    showInfo(index) {
      console.log(index)
      this.currentIndex = index
    },

    buyNow: function (type, status) {
		const tts = Math.floor(Date.now() / 1000);
		let bst = this.product.ban_start_time;
		let bet = this.product.ban_end_time;
		// 改价期间禁止下单
		if(bst != null && bet != null){
			if(tts >= bst && tts <= bet){
				this.$toast('商城价格更新中，暂停下单!')
				return
			}
		}
      if (type) {
        if (this.product.goods_type == 2) {
          this.$toast('该商品类型为预约到店，不可加入购物车,请直接购买')
          return
        }
      }
      if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && status === 2) {
        // this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
        return false
      }
      if (type === 'guige' && this.product.is_activity == 3) return

      // 如果商品有多规格，单独购买、拼团购买时重新获取商品规格库存
      if (this.product.hasoption && (status == 1 || status == 2)) {
        console.log(status)
        let type = ''
        if (status == 1) {
          type = 'normal'
        } else if (status == 2) {
          type = 'assemble'
        }
        this.$http.getSkuList({
          goods_id: this.product.id,
          type: type
        }).then(res => {
          if (res.status == 200) {
            this.skuList = res.data

            this.specList = this.originSpecList
            if (this.specList.length > 0) {
              // 初始化选择数据的对象
              this.specList.forEach(item => {
                this.$set(this.selectSpec, item.title, "");
              })
              // 将规格数据处理成我们视图所需要的数据类型
              this.specList = this.specList.map(item => {
                return {
                  title: item.title,
                  list: item.list.map(its => {
                    return {
                      id: its.id,
                      name: its.title,
                      thumb: its.thumb,
                      // 判断是否可以选择
                      able: this.isAble(item.title,
                          its
                              .title
                      ) // 注释的调试看逻辑代码 false
                    }
                  })
                }
              })
            }
          }
        })

      }

      this.PopupIndex = 5
      this.isPT = status
      this.$refs.popupRef.show() // 弹出
      buyNowNum = type // true加入购物车，  false直接购买b

    },
    submitOrder(status, type) {
      if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && type === 2) {
        // this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
        return false
      }
      if (buyNowNum) {
        this.attrSubmit(type)
      } else {
        buyNowNum = status
        this.attrSubmit(type)
      }
      this.$refs.popupRef.close() // 弹出
    },
    // 确认属性
    attrSubmit: function (type) {
      let isLogin = this.getIsLogin() // 判断是否登录
      if (!isLogin) {
        return false
      } // 判断是否登录
      //后续操作
      let data = {}
      if (this.getBtnText === this.$t('立即参团')) {
        data = {
          goods_id: shopId,
          goods_attr: strRadio.join('_'),
          num: this.buyNum,
          fangshi: 2,
          pin_number: this.choosePinNum
        }
      } else {
        data = {
          goods_id: shopId,
          goods_attr: strRadio.join('_'),
          num: this.buyNum,
          fangshi: type
        }
      }
      this.$loading()
      if (buyNowNum) {
        this.$http.getaddcart(data).then(res => {
          if (res.status == 200) {
            this.$toast(res.mess)
            //关闭
            this.$store.dispatch('contentnum')
            this.$refs.popupRef.close() // 关闭

            setTimeout(() => {
              this.userCartNum = this.$store.state.userCartNum
            }, 800)
          }
        })
      } else {
        this.$http.getpurbuy(data).then(res => {
          if (res.status == 200) {
			  //如果快递和同城商品同时存在，优先走同城
				let abc = [...this.datainfo.goodsinfo.entity_check];
				let gType = this.product.goods_type;
			  if(abc.includes("2")){
				let tcPrice = parseFloat((this.product.zs_shop_price*data.num).toFixed(2));
				this.getnav(`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=${this.product.goods_type}&tcType=3 &tcPrice=${tcPrice} &cartFree=${res.data.cart_free}`)
			  }else if(gType == 1 && abc.length == 1 && abc.includes("1")){
				this.getnav(`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=2`)
			  }else{
				this.getnav(`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=${this.product.goods_type}`)
			  }
          }
        })

      }

    },
    closeAttr: function () {
      this.isJoin = false
      this.$refs.popupRef.close() // 关闭
    },
	
	getStyle() {
		this.$http.getStyle().then(res => {
			if (res.status == 200) {
				this.background = res.data.home_nav_style;
			}
		})
	},

    buyNumChange: function (data, id) {
	  // if(this.isSelectAttr == 0){
		 //  this.$toast('请先选择规格！');
		 //  return
	  // }
      this.buyNum = data;
	  this.js_shop_price = (this.product.zs_shop_price * data).toFixed(2);
    },
    // 领取优惠券
    securities: function () {
      uni.navigateTo({
        url: '/pages/subPage/Coupon'
      })
    },
    timeuptime() {
      // 倒计时$t('Confirm')或执行
      this.$toast(this.$t(秒杀结束))
      this.getGoodsInfo()
      strRadio = []
    },
    getTab(src) {
      uni.switchTab({
        url: src
      });
    },
    getIsLogin() {
      if (!uni.getStorageSync('token')) {
        // #ifdef MP-WEIXIN
        uni.switchTab({
          url: '/pages/tabBar/my'
        });
        // #endif
        // #ifndef MP-WEIXIN
        uni.redirectTo({
          url: '/pagesB/login/login'
        });
        // #endif
        return false
      }
      return true
    },
    chat() {
      if (!uni.getStorageSync('token')) {
        // #ifdef MP-WEIXIN
        uni.switchTab({
          url: '/pages/tabBar/my'
        });
        // #endif
        // #ifndef MP-WEIXIN
        this.$u.route('/pagesB/login/login')
        // #endif

        return false
      }
      console.log(this.datainfo)
      this.$u.route('/pagesB/message/chat', {
        toId: this.datainfo.goodsinfo.shop_token,
        goodsId: this.goodsId
      })
    },
    // 关注
    home() {
      let isLogin = this.getIsLogin() // 判断是否登录
      if (!isLogin) {
        return false
      }
      if (this.product.coll_goods == 1) {
        // 取消关注
        this.$loading()
        this.$http.getcancelcoll({
          goods_id: shopId
        }).then(res => {
          if (res.status == 200) {
            this.$toast(res.mess)
            this.product.coll_goods = 0
          }
        })
      } else {
        this.$loading()
        this.$http.getcoll({
          goods_id: shopId
        }).then(res => {
          if (res.status == 200) {
            this.$toast(res.mess)
            this.product.coll_goods = 1
          }
        })
      }
    },

  }
}
</script>

<style lang="scss" scoped>
@import '~uview-ui/index.scss';

.hideCanvasView {
  height: 0rpx;
  overflow: hidden;
}

.swiper {
  height: 740rpx;
}

%Card {
  border-radius: 20rpx;
  margin: 20rpx 0;
  background-color: #fff;
  padding: 10rpx 20rpx;
}

.topPricePanel {
  @extend %Card;
  $color: #FE5000;

  .shopPrice {
    background-color: $color;
    color: #fff;
    padding: 2rpx 12rpx;
    border-radius: 200rpx;
    margin-left: 20rpx;
  }

  .shop-price {
    font-size: 50rpx;
    color: $color;
  }

  .market-price {
    font-size: 24rpx;
    color: rgb(144, 147, 153);

    text {
      text-decoration: line-through;
    }
  }
}

.pt-tip {
  display: block;
  line-height: 60rpx;
  text-align: center;
  padding: 0 0.1rem;
  color: #fff;
  background: #000;
}

.select {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.select-items {
  display: flex;
  flex-shrink: 0;
  padding: 4rpx 16rpx;
  background-color: #f4f4f4;
  align-items: center;
  border-radius: 10rpx;
  border: 1rpx solid #f4f4f4;

  .img {
    height: 40rpx;
    width: 40rpx;
    margin-right: 5rpx;
    padding: 5rpx;

  }
}

.grace-product-attr-info {
  .title {
    text {
      font-size: 26rpx;
    }
  }

  image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }
}

.index_class .grace-footer_assemble .right-htn__active {
  line-height: 90rpx !important;
}

.grace-product-attr {
  height: 80vh !important;
  position: absolute !important;
  border-radius: 24rpx 24rpx 0 0;
}

.grace-mask {
  position: relative !important;
}

.uni-countdown__splitor {
  color: #000;
}

.skeleton {
  height: 100vh;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;

  image {
    width: 100%;
    height: 100%;
  }
}

.enterShop {
  @extend %Card;
  padding: 20upx 10upx;
}

.entershop-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 30upx;
  padding-top: 20upx;
}

.entershop-wrap > image {
  border-radius: 50%;
  margin-right: 10rpx;
}

.entershop-wrap .entershop-middle {
  flex: 1;

  &-name {
    font-weight: 500;
  }
}

// 拼团
.fight-group {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  height: 87rpx;
  background: #f90cb4;
  color: #fff;
  font-size: 28rpx;
}

.fight-group__left {
  margin-right: 20rpx;
  font-size: 30rpx;

  i {
    font-size: 46rpx;
  }
}

.fight-group__middle {
  flex: 1;

  .fight-group__middle--top {
    margin-bottom: 6rpx;
    font-size: 24rpx;
  }

  .fight-group__middle--bottom {
    display: inline-block;
    height: 34rpx;
    line-height: 34rpx;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.7)
  }
}

.fight-group__step {
  // height: 522rpx;
  margin-top: 20rpx;
  padding: 32rpx 0 50rpx 0;
  background: #fff;
  @extend %Card;
}

.fight-group__step--header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  padding: 0 24rpx;
  color: #999;
  font-size: 26rpx;

  .middle {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.fight-group__step--middle {
  margin-bottom: 69rpx;
  color: #999999;
  font-size: 28rpx;
  text-align: center;

  image {
    position: relative;
    width: 104rpx;
    height: 104rpx;
    margin-bottom: 24rpx;
    border-radius: 50%;
  }

  .user-active:after {
    display: block;
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
    content: '团长';
    color: #fff;
    padding: 4rpx 2rpx;
    text-align: center;
    background: #FA3F3F;
    font-size: 22rpx;
  }
}

.fight-group__step--list {
  display: flex;

  .step-item__active {
    color: #FA3F3F !important;
  }

  .fight-group__step--item {
    flex: 1;
    color: #999999;
    font-size: 24rpx;
    text-align: center;

    &:last-child image::after {
      display: none;
    }

    image {
      position: relative;
      z-index: 1;
      width: 40rpx;
      height: 40rpx;
      overflow: inherit !important;
      margin-bottom: 24rpx;

      &::after {
        position: absolute;
        left: 40rpx;
        top: 50%;
        width: 239rpx;
        height: 2rpx;
        background: #E8E8E8;
        content: '';
        transform: translateY(-50%);
      }
    }

    text {
      display: block;
    }
  }
}

.singleBuyBtn {
  background-color: #6e05e5;
  color: #fff;
  border-radius: 8rpx;
  padding: 8rpx 38rpx;
  text-align: center;
}

.teamBuyBtn {
  @extend .singleBuyBtn;
  background-color: #f809b4;
}


.tag-name {
  display: inline-block;
  font-size: 22rpx;
  border: 1rpx solid #FA3F3F;
  width: 59rpx;
  height: 29rpx;
  line-height: 29rpx;
  margin-left: 10rpx;
  text-align: center;
  border-radius: 4rpx;
  color: #FA3F3F !important;
}

.fight-group__list {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;

  .fight-group__list--middle {
    flex: 1;
    padding: 0 10 0 20rpx;
    color: #999;
    font-size: 24rpx;
    margin-left: 20rpx;

    h2 {
      margin-bottom: 10rpx;
      font-size: 30rpx;
      color: #444;
      font-weight: 600;
    }
  }

  image {
    width: 88rpx;
    height: 88rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }

  .fight-group__list--item {
    font-size: 24rpx;
    color: #fff;
    padding: 10rpx 20rpx;
    display: inline-block;
    text-align: center;
    border-radius: 80rpx;
    background: #ef27b4;
  }
}

.commetItem {
  margin-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    margin-bottom: 0;
    border: none;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .leftWrap {
      display: flex;
      align-items: center;
    }

    .time {
      font-size: 24rpx;
      color: #666;
    }

    .avatar {
      display: flex;
      align-items: center;
      width: 60rpx;
      height: 60rpx;
      border-radius: 200px;
      margin-right: 20rpx;
    }
  }

  .star {
    font-size: 36rpx;
    font-weight: 800;
    color: #ff7f2b;
    margin-left: 15rpx;
    line-height: 1;
    margin-top: 10rpx;
  }

  .content {
    padding: 10rpx;
  }

  .imgWrap {
    display: flex;
    flex-wrap: wrap;

    image {
      width: 24%;
      margin-left: 4rpx;
      border-radius: 12rpx;
    }
  }
}

.bgCircle {
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;

}

.productNameWrap {
  padding: 12rpx 0;
  @extend .bgCircle
}

.goodsPrice {
  font-size: 42rpx;
  font-weight: 600;
}

.productBuyBtn {
  text-align: center;
  width: 180rpx;
  padding: 20rpx 0;
  background: #ffcc14;
  color: #fff;
  border-radius: 200px;

  &.leftBtn {
    background-color: #ffcc14;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.rightBtn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-image: linear-gradient(to right, #ff8864, #ff2121);
  }

  &.integralBtn {
    background-image: linear-gradient(to right, #ff8864, #ff2121);
  }
}

.param-table {
  /deep/ .param-title {
    font-weight: bold;
  }
}

.footerWrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}

.rightMenu {
  position: fixed;
  bottom: 140rpx;
  right: 20rpx;
  display: flex;
  flex-direction: column;

  .weshareBtn {
    width: 80rpx;
    height: 80rpx;
    background-color: transparent;
    padding: 0;
    margin-bottom: 20rpx;

    &::after {
      border: none;
    }
  }

  &icon {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(#fff, 0.2);
    border: 2rpx solid #dedede;
    border-radius: 200rpx;
    margin-bottom: 20rpx;
  }
}


.order-shop {

  @extend %Card;

  .order_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .juan {
      display: flex;

      text {
        font-size: 28rpx;
        color: #303133;

        &:nth-child(1) {
          font-weight: 500;
        }

      ;

        &:nth-child(2),
        &:nth-child(3) {
          color: #606266;
        }
      }

      .color {
        color: #f44336;
      }
    }

    .order_color {
      font-size: 26rpx;
      color: #333;
    }
  }
}

.grace-time-press {
  @extend %Card;
  margin: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .datatime-left {
    font-size: 24rpx;
    color: #FF0036;
    display: flex;
    align-items: center;

    .grace-countdown {
      .grace-countdown-numbers {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
      }
    }
  }

  .progress-right {
    position: relative;
    width: 230rpx;
    height: 30rpx;
    background: rgba(255, 67, 55, 0.2);
    font-size: 24rpx;
    color: #fff;
    text-align: center;
    line-height: 30rpx;
    border-radius: 15rpx;

    .active-pro {
      position: absolute;
      height: 30rpx;
      left: 0;
      top: 0;
      border-radius: 15rpx;
      background-color: #ff3333;
      opaity: 0.5;
    }
  }
}

.buyTeamWrap {
  padding: 38rpx;
  text-align: center;

  .title {
    font-size: 30rpx;
  }

  .remainder {
    color: #666;
    margin: 14rpx 0 28rpx;
  }
}

.grace-form {
  .grace-items {
    align-items: center;
  }
}

.disable-spec-tiem {
  border: 2rpx dashed #bbb;
}

.shopInfoRecommend {
  width: 25%;
  padding: 10upx;
  flex-direction: column;
}

.grace-product-info {
  margin-bottom: 6px;
  padding: 20upx 15upx 0;

  .u-item-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 30upx;
    font-weight: 500;

    .u-item-title-left {
      width: 6rpx;
      height: 30rpx;
      margin-right: 20rpx;
      background-image: linear-gradient(to bottom, #fa3f3f, #ffa468);
    }

    .comment-count {
      font-weight: 400;
      font-size: 24upx;
      display: inline-block;
      margin-left: 20upx;
      color: #666;
    }
  }


}


.headTablist {
  .headTabItem {
    color: #fff;
    padding: 10upx;
    font-size: 32upx;
    font-weight: 500;
    position: relative;
    transition: all 0.3s;

    &.headTabActive {
      font-size: 38upx;
      font-weight: 800;

      &::after {
        content: ' ';
        width: 40upx;
        height: 8upx;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateX(84%);
        border-radius: 100upx;
      }
    }
  }
}
.fw2 {
	width: 85%;
}
</style>
